<script lang="ts" setup>
import { reactive } from 'vue'
import { User, Lock, Message, Position, ChatRound } from '@element-plus/icons-vue'

const formInline = reactive({
    region1: '',
    region2: '',
})

const onSubmit = () => {
    console.log('submit!')
}
import { ref } from 'vue'

const currentPage = ref(1)
const pageSize = ref(4)
const name = ref('')
const starttime = ref('')
const endtime = ref('')
const totalpage = ref()
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const dialogVisible = ref(false)
const dialogname = ref()
const displaydel = ref(false)



const handleSizeChange = (size) => {
    pageSize.value = size
    activeData()
}
const handleCurrentChange = (current) => {
    currentPage.value = current
    activeData()
}
import {
    Delete,
    Edit,
    WarningFilled
} from '@element-plus/icons-vue'

import { activelistServer } from '@/api/active.js';
import { ElMessage, FormRules } from 'element-plus';

const tableData = ref()

const reg = /^[\u4e00-\u9fa5]+$/

const timeForm = "YYYY-MM-DD HH:mm:ss"

interface RuleForm {
    name: String,
    description: String,
    id: Number,
    starttime: Date,
    endtime: Date,
    bi: String
}


const addData = ref<RuleForm>({
    name: '',
    id: null,
    description: '',
    starttime: null,
    endtime: null,
    bi: ''

})



const activeData = async () => {
    let params = {
        countpage: currentPage.value,
        pagenumber: pageSize.value,
        name: name.value ? name.value : null,
        starttime: starttime.value ? moment(starttime.value).format(timeForm) : null,
        endtime: endtime.value ? moment(endtime.value).format(timeForm) : null
    }

    let result = await activelistServer(params)

    tableData.value = result.data.items
    totalpage.value = result.data.total
}

activeData();

const clearadddata = () => {
    addData.value = {
        name: '',
        id: null,
        description: '',
        starttime: null,
        endtime: null,
        bi: ''
    }
}

import { addactiveServer, updataactiveServer, delactiveServer } from '@/api/active.js';
import moment, { Moment } from 'moment';
const addactive = async () => {
    dialogVisible.value = false;
    let result = await addactiveServer(addData.value) as any;
    ElMessage.success(result.message ? result.message : '添加成功')
    clearadddata()
    activeData()
}

const updataactive = async () => {
    dialogVisible.value = false;
    let result = await updataactiveServer(addData.value) as any;
    ElMessage.success(result.message ? result.message : '修改成功')
    clearadddata()
    activeData()
}

const delactive = async () => {
    displaydel.value = false
    let result = await delactiveServer(addData.value.id) as any;
    ElMessage.success(result.message ? result.message : '删除成功')
    clearadddata()
    activeData()
}

const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '请输入活动名称', trigger: 'blur' },
        { pattern: reg, message: '要求全中文', trigger: 'blur' }
    ],

    description: [
        { required: true, message: '请输入限制条件', trigger: 'blur' },
        { pattern: reg, message: '要求全中文', trigger: 'blur' }
    ],

    bi: [
        { required: true, message: '请输入活动简介', trigger: 'blur' },
        { pattern: reg, message: '要求全中文', trigger: 'blur' }
    ]

})


const showupdataDiglog = (row) => {
    dialogVisible.value = true
    dialogname.value = '修改活动信息'
    addData.value.name = row.name
    addData.value.description = row.description
    addData.value.bi = row.bi
    addData.value.id = row.id
    addData.value.starttime = row.starttime
    addData.value.endtime = row.endtime

}

const showdelDiglog = (row) => {
    displaydel.value = true
    dialogname.value = '提示'
    addData.value.id = row.id

}

const sFormat = (row) => {
    const stime = row.starttime
    return moment(stime).format('YYYY-MM-DD HH:mm')
}

const eFormat = (row) => {
    const etime = row.endtime
    return moment(etime).format('YYYY-MM-DD HH:mm')
}

const shortcuts = [
    {
        text: '今天',
        value: new Date(),
    },
    {
        text: '昨天',
        value: () => {
            const date = new Date()
            date.setDate(date.getDate() - 1)
            return date
        },
    },
    {
        text: '明天',
        value: () => {
            const date = new Date()
            date.setDate(date.getDate() + 1)
            return date
        },
    },
    {
        text: '一周以后',
        value: () => {
            const date = new Date()
            date.setDate(date.getDate() + 7)
            return date
        },
    },
]



</script>


<template>

    <el-card style="max-width: 100%">
        <div class="card-header">
            <span>活动管理</span>
            <el-button type="primary" @click="dialogVisible = true, dialogname = '添加活动'">添加活动</el-button>
        </div>
        <div style="margin-top: 20px;">
            <hr>
        </div>
        <el-form :inline="true" class="form-inline">
            <el-form-item label="活动名称" prop="name">
                <el-input placeholder="请输入待查找活动名" v-model="name"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" prop="starttime">
                <el-date-picker v-model="starttime" type="datetime" placeholder="选择开始日期和时间" :shortcuts="shortcuts" />
            </el-form-item>
            <el-form-item label="结束时间" prop="endtime">
                <el-date-picker v-model="endtime" type="datetime" placeholder="选择结束日期和时间" :shortcuts="shortcuts" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="activeData()">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="default" @click="name = '', starttime = '', endtime = '', activeData()">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%" table-layout='auto'>
            <el-table-column prop="id" label="id" />
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="bi" label="简介" />
            <el-table-column prop="description" label="限制条件" />
            <el-table-column prop="starttime" label="开始时间" :formatter="sFormat" />
            <el-table-column prop="endtime" label="结束时间" :formatter="eFormat" />
            <el-table-column prop="num" label="参加人数" />
            <el-table-column label="操作" width="180">
                <template #default="{ row }">
                    <el-button type="primary" :icon="Edit" circle @click="showupdataDiglog(row)" />
                    <el-button type="danger" :icon="Delete" circle @click="showdelDiglog(row)" />
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible" :title="dialogname" width="500">
            <el-form ref="form" class="add" :rules="rules" :model="addData">
                <el-form-item label="活动名称" prop="name">
                    <el-input placeholder="请输入活动名称" v-model="addData.name"></el-input>
                </el-form-item>
                <el-form-item label="活动简介" prop="bi">
                    <el-input placeholder="请输入活动简介" v-model="addData.bi"></el-input>
                </el-form-item>
                <el-form-item label="限制条件" prop="description">
                    <el-input placeholder="请输入限制条件" v-model="addData.description"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" prop="starttime">
                    <el-date-picker v-model="addData.starttime" type="datetime" placeholder="选择开始日期和时间"
                        :shortcuts="shortcuts" value-format="YYYY-MM-DD HH:mm:ss"/>
                </el-form-item>
                <el-form-item label="结束时间" prop="endtime">
                    <el-date-picker v-model="addData.endtime" type="datetime" placeholder="选择结束日期和时间" 
                        :shortcuts="shortcuts" value-format="YYYY-MM-DD HH:mm:ss"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false, clearadddata()">取消</el-button>
                    <el-button type="primary"
                        @click="dialogname == '添加活动' ? addactive() : updataactive()">确认</el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="displaydel" :title=dialogname width="500">
            <el-icon color="red">
                <WarningFilled />
            </el-icon>
            <span style="text-align: center;display:block;font-size: 17px;">是否确认删除该活动</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="displaydel = false, clearadddata()">否</el-button>
                    <el-button type="primary" @click="delactive()">是</el-button>
                </div>
            </template>
        </el-dialog>



        <!--layout控制组件展示顺序-->
        <el-pagination class="el-p" v-model:current-page="currentPage" v-model:page-size="pageSize"
            :page-sizes="[4, 8, 12, 16]" :small="small" :disabled="disabled" :background="background"
            layout="jumper, prev, pager, next, sizes, total" :total="totalpage" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </el-card>
</template>

<style scoped>
.el-p {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.form-inline .el-input {
    --el-input-width: 220px;
}

.form-inline .el-select {
    --el-select-width: 220px;
}

.form-inline .el-date-picker {
    --el-select-width: 220px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    margin-inline-end: 20px;
}

.demo-datetime-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}
</style>